<template>
    <div>
        <div class="background-photo"></div>
        <div class="info container-lg">
            <div class="row">
                <div class="col-3 sidebar-border">
                    <div class="sidebar">
                        <div class="sidebar-title">
                            <div style="font-size: 30px;">首页</div>
                        </div>
                        <div :class="route_name == 'NewsInformation' ? 'sidebar-item my-active' : 'sidebar-item'">
                            <router-link class="sidebar-item-text" :to="{name: 'NewsInformation'}">新闻资讯</router-link>
                            <img class="sidebar-item-arrow" src="@/assets/image/arrow.png" >
                        </div>
                        <div :class="route_name == 'NoticeAnnouncement' ? 'sidebar-item my-active' : 'sidebar-item'">
                            <router-link class="sidebar-item-text" :to="{name: 'NoticeAnnouncement'}">通知公告</router-link>
                            <img class="sidebar-item-arrow" src="@/assets/image/arrow.png" >
                        </div>
                        <div :class="route_name == 'OnTheList' ? 'sidebar-item my-active' : 'sidebar-item'">
                            <router-link class="sidebar-item-text" :to="{name: 'OnTheList'}">榜上有名</router-link>
                            <img class="sidebar-item-arrow" src="@/assets/image/arrow.png" >
                        </div>
                    </div>
                </div>
                <div class="col-9">
                    <router-view />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted } from 'vue';
import { useStore } from 'vuex';
import { useRoute } from 'vue-router';
import { computed } from 'vue';

const store = useStore();
const route = useRoute();
let route_name = computed(() => route.name);

onMounted(() => {
    store.commit("updateCurrentPage", 'home');
})

</script>

<style scoped>

.info {
    min-height: 600px;
}

.background-photo {
    background-color: #92bad2;
    width: 100%;
    height: 400px;
}

.sidebar {
    position: absolute;
    width: 80%;
    top: -100px;
}
.sidebar-border {
    position: relative;
}
.sidebar-title {
    width: 100%;
    height: 120px;
    background-color: #1468a8;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    user-select: none;
}
.sidebar-item {
    background-color: #f6f8fd;
    height: 60px;
    padding: 20px 40px;
    border-bottom: 1px dashed #91b7d7;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.sidebar-item-text {
    font-size: 18px;
    text-decoration: none;
    color: inherit;
    user-select: none;
}
.sidebar-item:last-child {
    border-bottom: none;
}
.sidebar-item:hover {
    cursor: pointer;
}
.sidebar-item:hover .sidebar-item-text {
    font-weight: bold;
    color: #005aa0;
}
.sidebar-item-arrow {
    width: 25px; 
    height: 25px;
    opacity: 0;
    transition: opacity 0.3s ease;  /* 添加平滑过渡 */
    user-select: none;
}
.sidebar-item:hover .sidebar-item-arrow {
    opacity: 1;  /* 光标悬停时显示图片 */
}

.my-active .sidebar-item-arrow {
    opacity: 1;
}
.my-active .sidebar-item-text {
    font-weight: bold;
    color: #005aa0;
}

</style>